<template>
  <div class="container tree-list-layout tree-list-layout-400">
    <!--操作按钮-->
    <customSpace fullWidth style="    padding-left: 560px;padding-bottom: 8px;">
      <template #content>
        <customButton :block="true" title="保存" theme="primary" size="medium" @click="btnOp('save')" :disabled="cpDisabled" help="保存菜单配置"  helpDisabled="没有可保存的数据"/>
      </template>
    </customSpace>

    <!--左侧树-->
    <treeMenuAll ref="treeMenuAll" class="box-left" @click="nodeClick" :nodeOpAfter="nodeOpAfter" :defaultActived="[selectedMenu.id]"/>

    <!--右侧区域-->
    <div class="box-right">
      <div class="form-layout form-layout-relative">
        <!--左侧导航-->
        <div class="nav-left">
          <customAnchor
            :itemList="[{name: 'box-base',title: '基础信息'},{name: 'box-action',title: '访问配置'},{name: 'box-show',title: '显示配置'}]"
          />
        </div>

        <!--表单区域-->
        <div class="form-right" ref="formRight">
          <customForm
            :data="selectedMenu"
            ref="editForm"
            :disabled="cpDisabled"
            :rules="rules"
          >
            <template #content>

              <div class="box-title" id="box-base">基础信息</div>
              <customFormItem
                label="标题"
                name="title"
                :parent="_self"
                :form="selectedMenu"
                ref="title"
              />
              <customFormItem
                label="图标"
                name="icon"
                :parent="_self"
                :form="selectedMenu"
              />

              <!--<customFormItem
                label="菜单类型"
                name="menuType"
                :parent="_self"
                :form="selectedMenu"
                :type="constCommon.formItemType.checkbox.name"
                :config="{options: constCommon.nobusConst.menuType}"
              />-->

              <customFormItem
                label="菜单类型"
                name="menuType"
                :parent="_self"
                :form="selectedMenu"
                :type="constCommon.formItemType.radio.name"
                :config="{options: constCommon.nobusConst.menuType, defaultValue: 'web'}"
              />

              <customFormItem
                label="上级菜单"
                name="parentTitle"
                :parent="_self"
                :form="selectedMenu"
                :type="constCommon.formItemType.staticHtml.name"
                :config="{value: cpParentTitle}"
              />

              <div class="box-title"  id="box-action">访问配置</div>
              <customFormItem
                label="路由名称"
                name="name"
                :parent="_self"
                :form="selectedMenu"
                help="路由的导航名称，需要全局唯一，如：test_list"
              />
              <customFormItem
                label="使用流程"
                name="flowKey"
                :parent="_self"
                :form="selectedMenu"
                help="菜单使用的流程"
                :readonly="true"
                :showSelectIcon="true"
                @focus="$refs.tableDrawerFlow.show()"
              />
              <customFormItem
                label="列表标志"
                name="viewKey"
                :parent="_self"
                :form="selectedMenu"
                help="菜单使用的列表表单配置标识"
                :showSelectIcon="true"
                @focus="$refs.tableDrawerTable.show()"
              />
              <customFormItem
                label="路由路径"
                name="route"
                :parent="_self"
                :form="selectedMenu"
                help="路由的访问路径，需要全局唯一，如：test/list"
                fullWidth
              />
              <customFormItem
                label="页面资源"
                name="url"
                :parent="_self"
                :form="selectedMenu"
                help="页面资源路径，从views开始查找，如：test/index.vue"
                fullWidth
              />
              <customFormItem
                label="参数"
                name="parameter"
                :parent="_self"
                :form="selectedMenu"
                help="示例: user=aaa&name=bbb"
                fullWidth
              />

              <div class="box-title"  id="box-show">显示配置</div>
              <customFormItem
                label="显示排序"
                name="sort"
                :parent="_self"
                :form="selectedMenu"
                help="菜单在用户导航显示的顺序"
                :type="constCommon.formItemType.inputNumber.name"
              />
              <customFormItem
                label="菜单隐藏"
                name="isHidden"
                :parent="_self"
                :form="selectedMenu"
                help="勾选后，所有人都看不到"
                :type="constCommon.formItemType.switch.name"
              />
              <customFormItem
                label="仅管理员可见"
                name="isAdminMenu"
                :parent="_self"
                :form="selectedMenu"
                help="勾选后，只有管理员可以看到该菜单"
                :type="constCommon.formItemType.switch.name"
              />
            </template>
          </customForm>
        </div>
      </div>
    </div>

    <!--流程选择-->
    <tableDrawer ref="tableDrawerFlow" refName="tableDrawerFlow" @confirm="tableDrawerConfirm" viewKey="v_flow"/>

    <!--列表配置选择-->
    <tableDrawer ref="tableDrawerTable" refName="tableDrawerTable" @confirm="tableDrawerConfirm" viewKey="system_dv_define"/>
  </div>
</template>

<script>
import treeMenuAll from '@/components/custom/bus/treeMenuAll.vue'
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  name: 'programmerMenu',
  data() {
    return {
      // 所选择的菜单
      selectedMenu: {},

      // rules
      rules: {
        title: [
          {
            required: true,
            message: '标题必填',
            type: 'error',
            trigger: 'blur',
          }
        ]
      }
    }
  },
  components: {
    treeMenuAll, customAnchor
  },
  created() {

  },
  mounted() {
  },
  computed: {
    cpDisabled() {
      return this.strings.isBlank(this.selectedMenu.id)
    },
    cpParentTitle() {
      let title = ''
      if (this.selectedMenu.parentId == 0) {
        return '根节点'
      }
      if (this.strings.isNotBlank(this.selectedMenu.parentId)) {
        title = this.getTreeInst().getInst().getNodeLabelByValue(this.selectedMenu.parentId)
      }
      return title
    }
  },
  methods: {
    getTreeInst() {
      return this.$refs.treeMenuAll
    },
    // 节点点击
    nodeClick(nodeData) {
      this.selectedMenu = nodeData
    },
    // 按钮操作
    btnOp(type) {
      // eslint-disable-next-line default-case
      switch (type) {
      case 'save': { //保存
        this.$refs.editForm.validate().then(result => {
          if (result && result == true) {
            this.utilMessage.confirm(`是否保存菜单${this.selectedMenu.title}？`, () => {
              this.doSave(this.selectedMenu)
            })
          }
        })

        break
      }
      case 'load': { //刷新
        this.getTreeInst().load()
        this.selectedMenu = {}
        break
      }
      }
    },

    // 保存操作
    doSave(saveData) {
      this.utilVue.loadShow(true)
      this.$ajax.post('/program/menu/save', saveData).then(res => {
        if (res.code == 0) {
          this.utilMessage.success(res.msg)
          res.data.isNew = false
          this.getTreeInst().nodeUpdate(saveData.id, res.data)
        }
        this.utilVue.loadHide()
      })
    },

    // 删除操作
    doDelete() {
      this.utilMessage.confirm(`是否删除菜单${this.selectedMenu.title}？`, () => {
      })
    },

    // 父组件前缀方法,一般做检验，返回false，将终止操作
    nodeOpBefore(btnConfig, node) {
      // 添加子节点 前插节点 后插节点
      if (['addChild', 'addBefore', 'addAfter'].includes(btnConfig.key)) {
        if (this.selectedMenu.id && node.data.isNew && node.data.value != this.selectedMenu.id) {
          this.utilMessage.warning('请先保存当前菜单后再操作其他的')
          return false
        }
      }
    },

    // 节点操作后置方法
    nodeOpAfter(btnConfig, node, dataNew) {
      // 添加子节点 前插节点 后插节点
      if (['addChild', 'addBefore', 'addAfter'].includes(btnConfig.key)) {
        this.selectedMenu = dataNew
        this.utilMessage.warning('请完善表单其他属性后进行保存')
        this.$refs.title.focus()
        return true
      }

      // 删除节点
      if (btnConfig.key == 'remove') {
        this.selectedMenu = {}
        // 新节点
        if (node.data.isNew) {
          return true
        }
        this.utilVue.loadShow(true)
        this.$ajax.delete('/program/menu/delete', {data: { 'ids': [node.data.id] }}).then(res => {
          if (res.code == 0) {
            this.utilMessage.success(res.msg)
            this.getTreeInst().nodeRemove(node.data.id)
          }
          this.utilVue.loadHide()
        })
        return true
      }

      // 拖动节点
      if (btnConfig.key == 'dragEnd') {
        this.selectedMenu = {}
        // 新节点
        if (node.data.isNew) {
          return true
        }
        this.doSave(dataNew)
        return true
      }
    },

    // 选择
    tableDrawerConfirm(row, refName) {
      //流程选择
      if (refName == 'tableDrawerFlow') {
        this.$set(this.selectedMenu, 'flowKey', row.code)
        return true
      }

      //列表配置选择
      if (refName == 'tableDrawerTable') {
        this.$set(this.selectedMenu, 'viewKey', row.viewKey)
        return true
      }
    }
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>

</style>
